<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>promise</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.js"></script>
    <script src="../lib/angularjs/angular-route.min.js"></script>
    <style>body{margin:10px 80px;}</style>
</head>
<body ng-app="app01">
<h2>defer()方法</h2>
<div class="well"  ng-controller="ctrl01">
    <p>当前数字是否大于5：<span class="text-danger">【{{test>5}}】</span>{{test}}</p>
    <p>
        执行结果：{{result}}
    </p>
    <p>
        执行状态：{{state}}
    </p>
</div>
<div class="alert alert-danger">在$q中，可以使用resolve方法，变成完成状态；使用reject方法，变成拒绝状态。</div>
<h2>all()方法</h2>
<div class="well" ng-controller="ctrl02">
    {{message}}
</div>
<div class="alert alert-danger">这个all()方法，可以把多个primise的数组合并成一个。当所有的promise执行成功后，会执行后面的回调。回调中的参数，是每个promise执行的结果。</div>
<h3>when()方法</h3>
<div class="well" ng-controller="ctrl03">
    {{message}}
</div>
<div class="alert alert-danger">when方法中可以传入一个参数，这个参数可能是一个值，可能是一个符合promise标准的外部对象。</div>
</body>
<script>
    var app=angular.module('app01',[]);
</script>
<script>
    app.controller("ctrl01",["$scope","$q",'$interval',function($scope, $q,$interval){
        $scope.test = 1;//这个只是用来测试angularjs是否正常的，没其他的作用

        function set(state,value) {
            console.log('[state]:'+state);
            console.log('[value]:'+value);
            $scope.state=state;
            $scope.result=value;
        }

        $interval(function () {
            var defer1 = $q.defer();
            var promise1 = defer1.promise;
            $scope.test=Math.random()*10;
            if($scope.test>5){
                defer1.resolve("hello");
            }else{
                defer1.reject("sorry,reject");
            }
            $scope.state='';
            $scope.result='';
            promise1.then(function (value) {
                set("【in promise1 ---- success】 ",value)
            }, function (value) {
                set("【in promise1 ---- error】 ",value)
            }, function (value) {
                set(" 【in promise1 ---- notify】 ",value)
            }).catch(function (e) {
                set($scope.state+'【in promise1 ---- catch】' ,value)
            }).finally(function (value) {
                set($scope.state+' 【in promise1 ---- finally】',value)
            });

        },2500);
    }]);
</script>
<script>
    app.controller("ctrl02",["$scope","$q",'$interval',function($scope, $q,$interval){
        var funcA = function(){
            console.log("funcA");
            return "hello,funA";
        }
        var funcB = function(){
            console.log("funcB");
            return "hello,funB";
        }
        $q.all([funcA(),funcB()]).then(function(result){
            $scope.message=(result);
        });
    }]);
</script>
<script>
    app.controller("ctrl03",["$scope","$q",'$interval',function($scope, $q,$interval){
        var funcA = function(){
            console.log("funcA");
            return "hello,funA";
        }
        $q.when(funcA()).then(function(result){
            $scope.message=(result);
        });
    }]);
</script>
</html>